import React from 'react';
import { Layout, Menu, Avatar } from 'antd';
import {
    UserOutlined,
    DashboardOutlined,
    ProfileOutlined,
} from '@ant-design/icons';
import { Link, Route, Routes } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

const Dashboard = () => <div>Dashboard Content</div>;
const Profile = () => <div>Profile Content</div>;

const MainLayout = () => {
    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 顶部导航栏 */}
            <Header className="header" style={{ background: '#rgb(38, 41, 53)', padding: 0 }}>
                <div className="logo" />
                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} style={{ background: '#rgb(38, 41, 53)', flexGrow: 1 }}>
                    <Menu.Item key="1" style={{ color: '#000' }}><Link to="/oa">企业办公</Link></Menu.Item>
                    <Menu.Item key="2" style={{ color: '#000' }}><Link to="/profile">Profile</Link></Menu.Item>
                    <Menu.Item key="3" style={{ color: '#000' }}><Link to="/dashboard">Dashboard</Link></Menu.Item>
                    <Menu.Item key="4" style={{ color: '#000' }}><Link to="/profile">Profile</Link></Menu.Item>
                    <Menu.Item key="5" style={{ color: '#000' }}><Link to="/dashboard">Dashboard</Link></Menu.Item>
                    <Menu.Item key="6" style={{ color: '#000' }}><Link to="/profile">Profile</Link></Menu.Item>
                    <Menu.Item key="7" style={{ color: '#000' }}><Link to="/dashboard">Dashboard</Link></Menu.Item>
                    <Menu.Item key="8" style={{ color: '#000' }}><Link to="/profile">Profile</Link></Menu.Item>
                    {/* 添加其他一级导航菜单项 */}
                </Menu>
                <div style={{ display: 'flex', alignItems: 'center', paddingRight: '20px' }}>
                    <Avatar icon={<UserOutlined />} />
                    {/* 显示登录人头像，这里需要替换为真实的登录信息 */}
                </div>
            </Header>

            {/* 左部导航栏 */}
            <Layout>
                <Sider width={200} theme="light" collapsible>
                    <Menu mode="vertical" theme="light" defaultSelectedKeys={['1']} style={{ background: '#e6edff' }}>
                        <Menu.Item key="1" icon={<DashboardOutlined />}>
                            <Link to="/oa/contacts">通讯录</Link>
                        </Menu.Item>
                        <Menu.Item key="2" icon={<ProfileOutlined />}>
                            <Link to="/profile">Profile</Link>
                        </Menu.Item>
                        {/* 添加其他二级导航菜单项 */}
                    </Menu>
                </Sider>

                {/* 主要内容区域 */}
                <Layout style={{ padding: '24px' }}>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        {/* 右侧功能内容 */}
                        <Routes>
                            <Route path="/dashboard" element={<Dashboard />} />
                            <Route path="/profile" element={<Profile />} />
                            {/* 添加其他页面的路由 */}
                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default MainLayout;
